<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加减计数器（含重置功能）</title>
    <style>
        /* 页面的基本样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            display: flex; /* 使用弹性布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 设置页面高度为视口高度 */
            margin: 0; /* 去掉默认的外边距 */
            background-color: #f0f0f0; /* 设置背景颜色 */
        }

        /* 计数器容器的样式 */
        .counter-container {
            display: flex; /* 使用弹性布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置按钮和数字之间的间距 */
            background-color: #fff; /* 设置背景颜色 */
            padding: 20px; /* 设置内边距 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        /* 按钮的样式 */
        .counter-container button {
            padding: 10px 20px; /* 设置按钮的内边距 */
            font-size: 16px; /* 设置按钮的字体大小 */
            cursor: pointer; /* 设置鼠标悬停时的光标样式 */
        }

        /* 按钮悬停时的样式 */
        .counter-container button:hover {
            background-color: #f0f0f0; /* 悬停时的背景颜色 */
        }

        /* 显示计数值的样式 */
        .counter-value {
            font-size: 24px; /* 设置字体大小 */
            font-weight: bold; /* 设置字体为加粗 */
        }
    </style>
</head>
<body>
    <!-- 计数器的HTML结构 -->
    <div class="counter-container">
        <!-- 减号按钮 -->
        <button id="decrement-btn">-</button>
        <!-- 用于显示计数值 -->
        <div class="counter-value" id="counter-value">0</div>
        <!-- 加号按钮 -->
        <button id="increment-btn">+</button>
        <!-- 重置按钮 -->
        <button id="reset-btn">重置</button>
    </div>

    <script>
        // 获取页面中的DOM元素
        const decrementBtn = document.getElementById('decrement-btn'); // 获取减号按钮
        const incrementBtn = document.getElementById('increment-btn'); // 获取加号按钮
        const resetBtn = document.getElementById('reset-btn'); // 获取重置按钮
        const counterValue = document.getElementById('counter-value'); // 获取显示计数值的元素

        let count = 0; // 定义一个变量用于存储计数值，初始值为0

        // 为加号按钮添加点击事件
        incrementBtn.addEventListener('click', () => {
            count++; // 每次点击加号按钮，计数值加1
            counterValue.textContent = count; // 更新页面上显示的计数值
        });

        // 为减号按钮添加点击事件
        decrementBtn.addEventListener('click', () => {
            count--; // 每次点击减号按钮，计数值减1
            counterValue.textContent = count; // 更新页面上显示的计数值
        });

        // 为重置按钮添加点击事件
        resetBtn.addEventListener('click', () => {
            count = 0; // 将计数值重置为0
            counterValue.textContent = count; // 更新页面上显示的计数值
        });
    </script>
</body>
</html>